<template>
  <div class="card">
    <div class="first">
      <div class="left">{{ title }}</div>
      <div class="right">
        <el-icon><Right /></el-icon>
      </div>
    </div>
    <div class="second">立即前往</div>
    <div class="bgText">{{ bgText }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const { title, bgColor, bgText } = defineProps<{
  title: string
  bgColor: string
  bgText: string
}>()
const spTextSize = ref('')
if (bgText.length >= 3) {
  spTextSize.value = '148px'
} else {
  spTextSize.value = '160px'
}
</script>

<style scoped lang="less">
.card {
  background: v-bind(bgColor);
  box-shadow: 2px 4px 4px 3px rgba(105, 143, 249, 0.1);
  border-radius: 8px;
  padding: 32px;
  position: relative;
  padding-bottom: 100px;
  margin-bottom: 20px;
  z-index: 1;
  .first {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      font-size: 40px;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 56px;
    }
    .right {
      width: 52px;
      height: 40px;
      background: #ffffff;
      border-radius: 8px;
      text-align: center;
      line-height: 48px;
      color: v-bind(bgColor);
      font-size: 26px;
    }
  }
  .second {
    font-size: 24px;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 33px;
    margin-top: 10px;
  }
  .bgText {
    font-size: v-bind(spTextSize);
    font-family: MFJiaHei_Noncommercial, MFJiaHei_Noncommercial;
    font-weight: 400;
    color: #ffffff;
    position: absolute;
    right: -10px;
    bottom: -50px;
    z-index: -1;
    opacity: 0.2;
    transform: scaleX(0.8);
  }
}
</style>
